<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>分类</title>
  <link rel="stylesheet" href="./css/classification.css">
</head>

<body>
  <div class="jacket">
    <!-- 搜索 -->
    <header>
      <div class="search">
        <a href="#">
          <div class="icon"><img src="./img/logo.png" alt=""></div>
          <div>搜索商品名称</div>
        </a>
      </div>
    </header>
    <!-- 功能 -->
    <main>
      <!-- 导航 -->
      <div class="nav">
        <a href="#anchor-point1">
          <div class="txt">推荐</div>
        </a>
        <a href="#anchor-point2">
          <div class="txt">Xiaomi手机</div>
        </a>
        <a href="#anchor-point3">
          <div class="txt">Redmi手机</div>
        </a>
        <a href="#">
          <div class="txt">手机配件</div>
        </a>
        <a href="#">
          <div class="txt">电脑平板</div>
        </a>
        <a href="#">
          <div class="txt">智能穿戴</div>
        </a>
        <a href="#">
          <div class="txt">电视</div>
        </a>
        <a href="#">
          <div class="txt">空调</div>
        </a>
        <a href="#">
          <div class="txt">冰洗厨电</div>
        </a>
        <a href="#">
          <div class="txt">小家电</div>
        </a>
        <a href="#">
          <div class="txt">智能家电</div>
        </a>
        <a href="#">
          <div class="txt">出行运动</div>
        </a>
        <a href="#">
          <div class="txt">车周边</div>
        </a>
        <a href="#">
          <div class="txt">日用百货</div>
        </a>
        <a href="#">
          <div class="txt">商城定制</div>
        </a>
        <a href="#">
          <div class="txt">小米服务</div>
        </a>
        <a href="#">
          <div class="txt">儿童用品</div>
        </a>
        <a href="#">
          <div class="txt">有品精选</div>
        </a>
      </div>
      <!-- 产品内容 -->
      <section>
        <!-- 推荐 -->
        <div class="box" id="anchor-point1">
          <!-- 内容头部 -->
          <div class="header">
            <!-- 广告 -->
            <div class="advertisement"><img src="./img/rmsj.png" alt="广告图片"></div>
          </div>
          <div class="main">
            <div class="product">
              <!-- 小标题 -->
              <h4>精选推荐</h4>
              <!-- 产品 -->
              <div class="product-data">
                <div class="picture"><img src="./img/redmi4.png" alt=""></div>
                <div class="txt">
                  <p>Redmi Note 14 Pro</p>
                  <p>￥ <b>1399</b>起<span>上新</span></p>
                </div>
              </div>
              <div class="product-data">
                <div class="picture"><img src="./img/17fe0c43d4e970c047f2a69b73e15459.png" alt=""></div>
                <div class="txt">
                  <p>Xiaomi Buds 6 活力版</p>
                  <p>￥ <b>99</b>起</p>
                </div>
              </div>
              <div class="product-data">
                <div class="picture"><img src="./img/redmi17.png" alt=""></div>
                <div class="txt">
                  <p>Redmi Buds 6 活力版</p>
                  <p>￥ <b>99</b>起</p>
                </div>
              </div>
            </div>
            <div class="product">

              <div class="product-data">
                <div class="picture"><img src="./img/redmi4.png" alt=""></div>
                <div class="txt">
                  <p>Redmi Note 70 Pro</p>
                  <p>￥ <b>1399</b>起<span>上新</span></p>
                </div>
              </div>
              <div class="product-data">
                <div class="picture"><img src="./img/redmi22.png" alt=""></div>
                <div class="txt">
                  <p>Redmi 6 青春版</p>
                  <p>￥ <b>99</b>起</p>
                </div>
              </div>
              <div class="product-data">
                <div class="picture"><img src="./img/redmi13.png" alt=""></div>
                <div class="txt">
                  <p>Redmi Buds 6 活力版</p>
                  <p>￥ <b>99</b>起</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- ----------------------------------------------------------------------------- -->

        <!-- Xiaomi手机 -->
        <div class="box" id="anchor-point2">
          <div class="header">
            <!-- 广告 -->
            <div class="advertisement"><img src="./img/mibanner.jpg" alt="广告图片"></div>
            <!-- 导航 -->
            <nav>
              <div class="Product-type">
                Xiaomi MIX系列
              </div>
              <div class="Product-type">
                Xiaomi 数字旗舰
              </div>
            </nav>
          </div>

          <div class="main">
            <!-- 推荐 -->
            <div class="product">
              <!-- 小标题 -->
              <h4>Xiaomi MIX系列</h4>
              <!-- 产品 -->


              <div class="product-data">
                <div class="picture"><img src="./img/redmi4.png" alt=""></div>
                <div class="txt">
                  <p>Redmi Note 14 Pro</p>
                  <p>￥ <b>1399</b>起<span>上新</span></p>
                </div>
              </div>


              <div class="product-data">
                <div class="picture"><img src="./img/redmi30.png" alt=""></div>
                <div class="txt">
                  <p>Redmi Buds 6 活力版</p>
                  <p>￥ <b>99</b>起</p>
                </div>
              </div>
              <div class="product-data">
                <div class="picture"><img src="./img/redmi32.png" alt=""></div>
                <div class="txt">
                  <p>Redmi Buds 6 活力版</p>
                  <p>￥ <b>99</b>起</p>
                </div>
              </div>
            </div>
            <div class="product">
              <!-- 小标题 -->
              <h4> Xiaomi 数字旗舰</h4>
              <!-- 产品 -->
              <div class="product-data">
                <div class="picture"><img src="./img/mitv.jpg" alt=""></div>
                <div class="txt">
                  <p>Redmi Note 14 Pro</p>
                  <p>￥ <b>1399</b>起<span>上新</span></p>
                </div>
              </div>
              <div class="product-data">
                <div class="picture"><img src="./img/redmi26.png" alt=""></div>
                <div class="txt">
                  <p>Redmi Buds 6 活力版</p>
                  <p>￥ <b>99</b>起</p>
                </div>
              </div>
              <div class="product-data">
                <div class="picture"><img src="./img/redmi19.png" alt=""></div>
                <div class="txt">
                  <p>Redmi Buds 6 活力版</p>
                  <p>￥ <b>99</b>起</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Redmi手机 -->

        <!-- ----------------------------------------------------------------------------- -->
        <div class="box" id="anchor-point3">
          <div class="header">
            <!-- 广告 -->
            <div class="advertisement"><img src="./img/banner5.jpg" alt="广告图片"></div>
            <!-- 导航 -->
            <nav>
              <div class="Product-type">
                Xiaomi MIX系列
              </div>
              <div class="Product-type">
                Xiaomi 数字旗舰
              </div>


            </nav>
          </div>

          <div class="main">
            <!-- 推荐 -->
            <div class="product">
              <!-- 小标题 -->
              <h4>Xiaomi MIX系列</h4>
              <!-- 产品 -->


              <div class="product-data">
                <div class="picture"><img src="./img/redmi4.png" alt=""></div>
                <div class="txt">
                  <p>Redmi Note 14 Pro</p>
                  <p>￥ <b>1399</b>起<span>上新</span></p>
                </div>
              </div>


              <div class="product-data">
                <div class="picture"><img src="./img/17fe0c43d4e970c047f2a69b73e15459.png" alt=""></div>
                <div class="txt">
                  <p>Redmi Buds 6 活力版</p>
                  <p>￥ <b>99</b>起</p>
                </div>
              </div>
              <div class="product-data">
                <div class="picture"><img src="./img/redmi18.png" alt=""></div>
                <div class="txt">
                  <p>Redmi Buds 6 活力版</p>
                  <p>￥ <b>99</b>起</p>
                </div>
              </div>
            </div>
            <div class="product">
              <!-- 小标题 -->
              <h4> Xiaomi 数字旗舰</h4>
              <!-- 产品 -->
              <div class="product-data">
                <div class="picture"><img src="./img/redmi4.png" alt=""></div>
                <div class="txt">
                  <p>Redmi Note 14 Pro</p>
                  <p>￥ <b>1399</b>起<span>上新</span></p>
                </div>
              </div>
              <div class="product-data">
                <div class="picture"><img src="./img/redmi17.png" alt=""></div>
                <div class="txt">
                  <p>Redmi Buds 6 活力版</p>
                  <p>￥ <b>99</b>起</p>
                </div>
              </div>
              <div class="product-data">
                <div class="picture"><img src="./img/minotebook2.jpg" alt=""></div>
                <div class="txt">
                  <p>Redmi Buds 6 活力版</p>
                  <p>￥ <b>99</b>起</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 手机配件 -->
        <!-- 电脑平板 -->
        <!-- ... -->
      </section>

    </main>
    <!-- 页脚 -->
    <footer>
      <!-- 导航栏 -->
      <nav>
        <a href="./homepage1.html">
          <div class="box">
            <div class="icon"><img src="./img/iconhome.png" alt=""></div>
            <p>首页</p>
          </div>
        </a>
        <a href="#">
          <div class="box">
            <div class="icon"><img src="./img/iconcategoryselected.png" alt=""></div>
            <p>分类</p>
          </div>
        </a>
        <a href="./miQ.html">
          <div class="box">
            <div class="icon"><img src="./img/iconstar.png" alt=""></div>
            <p>米圈</p>
          </div>
        </a>
        <a href="./miCar.html">
          <div class="box">
            <div class="icon"><img src="./img/iconcart.png" alt=""></div>
            <p>购物车</p>
          </div>
        </a>
        <a href="./mine.html">
          <div class="box">
            <div class="icon"><img src="./img/iconuser.png" alt=""></div>
            <p>我的</p>
          </div>
        </a>

      </nav>
    </footer>
  </div>
  <script></script>
</body>

</html>